Media Queries
Using media queries - CSS: Cascading Style Sheets | MDN
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ
モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。
必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう
max-widthがあれば、0からそのmax-widthまで。
min-widthがあれば、無限大の大きさからそのmin-widthまで
「エミュレートとメディアクエリ検証」Chrome DevTools Tips集 #1 | 開発ツール | UI's Blog
Chrome Devtoolsでの表示例 ctrl+shift+P で
@media(min-width:480px){...}
at minimumで widthが480pxあれば適用
CSSファイルは上から下に適用され、条件に合うものは全て適用???
mediaQueryの一部?は、Flexboxで代替できる。なぜなら、上手くwrapなどしてくれるから。
Flexboxのitemに、min-widthを設定して最小でも守る幅を設定
Flexboxのcontainerに、max-widthを設定する?
css